<template>
    <div class = "box">
        <aside @click="key">
            {{ city }}
            <div class ="img">
                <img src="@/assets/images/down.png" alt="">
            </div>
        </aside>
        <router-link to="/searchpage"
            tag = "section"
        >
            <div class = "icon">
                <img src="@/assets/images/key.png" alt="">
            </div>
            <input type="text" placeholder="搜素关键字商品" v-model = "num">
        </router-link>
        <router-link
            to = "New"
            tag = "article"
        >
            <div class = "img-box">
                <img src="@/assets/images/page.png" alt="">
            </div>
        </router-link>
    </div>
    <!-- <div class="search">
        <router-link to="/searchpage">
            <div class="search-input">
                <form action="" method="post">
                    <i class="search-icon"></i>
                    <input type="text" value="" placeholder="搜索商品"/>
                </form>
            </div>
        </router-link>
    </div> -->
</template>
<script>
import { constants } from 'fs';
export default {
    data(){
        return{
            city:"福山区",
            latitude:"",
            longitude:"",
            num:"",
        }
    },
    methods:{
        key(){
            // window.webkit.messageHandlers.getLocation.postMessage();

            // var u = navigator.userAgent;
            // if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){ //android终端
            //    window.androidStub.getGoodsLink(val)
            //     // return 0;
            // }else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios终端
            //     // return 1;
            //     window.webkit.messageHandlers.getLocation.postMessage();

            // }
            this.$router.push("/Map")
        },
        getCity(){
            this.latitude =this.$store.state.latitude 
            this.longitude =this.$store.state.longitude 
            let loc = this.latitude+","+this.longitude
            this.$api.City({location:(loc)}, res => {
                this.city = res.regeocode.addressComponent.district
            })
        },
        // getLocation(data){
        //     let a = data.split(",")
        //     this.num = a
        //     this.$store.state.latitude = a[0]
        //     this.$store.state.longitude = a[1]
        // },
        // getLocation(data){
        //     this.num = 2222222222222222222222
        //     this.num =data
        // }
    },
    computed:{
        // 写入
    },
    mounted(){
        // console.log(window)
        this.getCity()
        // this.num = localStorage.getItem('user_token')
        // alert(localStorage.getItem('user_token'))
        // window['getLocation'] = data=>{
        //     this.getLocation(data)
        // }
        // window['getLocation'] = data=>{
        //     this.getLocation(data)
        // }
    },
    created(){
        this.latitude = this.$store.state.latitude
        this.longitude= this.$store.state.longitude 
        // this.num = localStorage.getItem('user_token')
    },
    watch:{
        // 监听
        '$store.state.latitude'(){
            // alert(1111)
            this.getCity()
            // this.num = localStorage.getItem('user_token')
        },
        '$store.state.longitude'(){
            this.getCity()
            // this.num = localStorage.getItem('user_token')
        }
    }
}
</script>

<style lang="less" scoped>
    .box{
        height:44px;
        background:#72b0f9;
        padding:10px;
        position: fixed;
        top:0px;
        z-index: 99;
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        aside{
            width:70px;
            height:44px;
            text-align: left;
            color:#111;
            display: flex;
            line-height:44px;
            align-items: center;
            .img{
                height:10px;
                width:10px;
                line-height:0px;
                margin-left:5px;
                padding:0px;
                img{
                    height:100%;
                    width:100%;
                }
            }
        }
        section{
            background:#eee;
            border-radius: 5px;
            flex:1;
            align-items: center;
            border:0px 5px;
            display: flex;
            .icon{
                height:10px;
                width:10px;
                margin:0px 10px;
                img{
                    height:100%;
                    width:100%;
                }
            }
            input{
                height:100%;
                flex:1;
                height:20px;
                border:0px;
            }
        }
        article{
            width:40px;
            display: flex;
            justify-items: center;
            justify-content: right;
            .img-box{
                height:20px;
                width:20px;
                margin-left:10px;
                img{
                    height:100%;
                    width:100%;
                }
            }
        }
    }
</style>

